<template>
	<view>
		<view class="ttitle" v-if="placelist.length" style="width: 100%;background-color: gold;">
			<view style="min-width: 150rpx;">#</view>
			<view style="width: 100%;background-color: gold;">类目</view>
			<view style="width: 100%;background-color: gold;" v-for="item,index in placelist" :key="index">{{item.name}}
			</view>
			<view style="width: 100%;background-color: gold;">预算、测算总金额</view>
			<view style="width: 100%;background-color: gold;">动态累计发生金额</view>
			<view style="width: 100%;background-color: gold;">剩余金额</view>
			<view style="width: 100%;background-color: gold;">备注</view>
		</view>
		<view class="ttitlea">
			<view v-for="item,index in moduleslist">
				<view class="ttitle" @click="changeChk(index)">
					<view
						:style='item.id?"background-color: "+colorList[level]+";min-width: 150rpx;":"background-color:lavender;min-width: 150rpx;"'>
						<span style="float: left;transform: rotate(90deg);"
							v-if="showList[index] && item.children">></span>
						<span style="float: left;" v-else-if="item.children">></span>
						<span v-else></span>
						<span>{{item.id}}</span>
					</view>
					<view :style='item.id?"background-color: "+colorList[level]+";":"background-color:lavender"'>
						{{item.name}}
					</view>
					<view v-for="item1,index in item.maindata" :key="index"
						:style='item.id?"background-color: "+colorList[level]+";":"background-color:lavender"'>
						{{item1.money}}
					</view>
					<view :style='item.id?"background-color: "+colorList[level]+";":"background-color:lavender"'>
						{{item.predict_money}}
					</view>
					<view :style='item.id?"background-color: "+colorList[level]+";":"background-color:lavender"'>
						{{getTotalMoney(item.maindata)}}
					</view>
					<!-- <view v-if="item.name=='总计单方造价（指标）'" :style='item.id?"background-color: "+colorList[level]+";":"background-color:lavender"'>{{(item.predict_money-item.totalmoney).toFixed(3)}} -->
					<view :style='item.id?"background-color: "+colorList[level]+";":"background-color:lavender"'>
						{{item.name=='总计单方造价（指标）'?(item.predict_money-item.totalmoney).toFixed(3):item.predict_money-item.totalmoney}}
					</view>
					<view :style='item.id?"background-color: "+colorList[level]+";":"background-color:lavender"'>
						{{item.remarks?item.remarks.remark:'--'}}
					</view>
				</view>
				<view v-if="item.is_materials" class="ttitle" :style='"background-color: "+"white"+";"'>
					<view style="min-width: 150rpx;"></view>
					<view>数量</view>
					<view v-for="item,index in item.maindata" :key="index">{{item.num}}</view>
					<view>{{item.predict_do}}</view>
					<view>{{getTotalMoney(item.maindata)}}</view>
					<view>{{item.predict_do-item.totalnum}}</view>
					<view>--</view>
				</view>
				<view v-if="item.children">
					<view v-show="showList[index]">
						<view> </view>
						<TreeView :placelist='[]' :moduleslist="item.children" :level="level+1"></TreeView>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		getCurrentInstance,
		watch
	} from "vue"
	import TreeView from "../TreeView/TreeView.vue"
	export default {
		components: {
			TreeView
		},
		props: ["placelist", "moduleslist", "level"],
		setup(props) {
			var colorList = reactive(['lightgreen', 'lightblue', 'azure', 'pink', 'lightyellow', "lightgrey"])
			var showList = ref([])
			var {
				proxy
			} = getCurrentInstance()
			// var getTotalMoney = computed(() => {
			// 	var total = 0
			// 	// moduleslist.forEach((res) => {
			// 	// 	if (res.money) {
			// 	// 		total += res.money
			// 	// 	}
			// 	// })
			// 	return total
			// })
			// var getTotalNum = computed(() => {
			// 	var total = 0
			// 	// moduleslist.forEach((res) => {
			// 	// 	if (res.money) {
			// 	// 		total += res.money
			// 	// 	}
			// 	// })
			// 	return total
			// })
			var getTotalMoney = (kkk) => {
				var total = 0
				kkk.forEach((res) => {
					if (res.money) {
						total += Number(res.money)
					}
				})
				return total
			}

			var getTotalNum = (kkk) => {
				var total = 0
				kkk.forEach((res) => {
					if (res.num) {
						total += res.num
					}
				})
				return total
			}
			onMounted(() => {
				showList.value = new Array(props.moduleslist.length).fill(false)
			})
			watch(() => props.moduleslist, () => {
				showList.value = new Array(props.moduleslist.length).fill(false)
			})
			var changeChk = function(index) {
				showList.value[index] = !showList.value[index]
			}
			return {
				colorList,
				getTotalMoney,
				getTotalNum,
				showList,
				changeChk,
			}
		},

	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.van-cell {
		width: 100%;
	}

	.ttitle {
		display: flex;
		/* lavender */
	}

	.ttitle>view {
		padding: 5rpx 10rpx;
		border: 1px solid black;
		min-width: 300rpx;
		box-sizing: border-box;
		text-align: center;
	}

	/* 	.ttitlea>view:nth-last-child(2)>view>view,
	.ttitlea>view:last-child>view>view {
		background-color: lavender !important;
	} */

	.main {
		/* 		white-space: nowrap;
		overflow-x: auto;
		color: azure; */
	}
</style>
